<template>
  <ElDialog class="detail-dialog" :title="dialogTitle" v-model="dialogVisible" width="900px">
    <el-tabs v-model="subTabsName">
      <!-- 子表 信息 -->
      <el-tab-pane label="文玩信息" name="infoMain" class="tab-panel">
        <el-row>
          <el-col :span="7" justify="center">
            <el-card
              v-loading="formLoading"
              class="box-card"
              style="width: 234px">
              <template #header>
                <div class="card-number">
                  <el-text type="info">#000xxx{{formData!.id}}</el-text>
                </div>
                <div class="card-name">
                  <el-text tag='b' size="large">{{ formData!.name }}</el-text>
                </div>
              </template>
              <div class="image-error" >
                <el-image style="width: 194px; height: 194px;" :src="getThumbnail()" fit="cover">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-text class="mx-1">分类: </el-text>
                  <dict-tag :type="DICT_TYPE.ARTIFACT_CATEGORY" :value="formData!.category" />
                </el-col>
                <el-col :span="12">
                  <el-text class="mx-1">材质: </el-text>
                  <dict-tag :type="DICT_TYPE.ARTIFACT_MATERIAL" :value="formData!.material" />
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-text class="mx-1">长度: </el-text>
                  <el-text class="mx-1" type="primary" v-if="formData!.length">{{formData!.length}}cm</el-text>
                  <el-text class="mx-1" type="primary" v-else>-- cm</el-text>
                </el-col>
                <el-col :span="12">
                  <el-text class="mx-1">宽度: </el-text>
                  <el-text class="mx-1" type="primary" v-if="formData!.width">{{formData!.width}}cm</el-text>
                  <el-text class="mx-1" type="primary" v-else>-- cm</el-text>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-text class="mx-1">高度: </el-text>
                  <el-text class="mx-1" type="primary" v-if="formData!.height">{{formData!.height}}cm</el-text>
                  <el-text class="mx-1" type="primary" v-else>-- cm</el-text>
                </el-col>
                <el-col :span="12">
                  <el-text class="mx-1">重量: </el-text>
                  <el-text class="mx-1" type="primary" v-if="formData!.weight">{{formData!.weight}}g</el-text>
                  <el-text class="mx-1" type="primary" v-else>-- g</el-text>
                </el-col>
              </el-row>
              <div v-if="!formData!.year">
                <el-text>年代: </el-text>
                <el-text type="primary">不详</el-text>
              </div>
              <div v-else-if="formData!.year >= 0">
                <el-text>公元: </el-text>
                <el-text type="primary">{{formData!.year}} 年</el-text>
              </div>
              <div v-else>
                <el-text>公元前: </el-text>
                <el-text type="primary">{{-formData!.year}} 年</el-text>
              </div>
              <div>
                <el-text>年代描述: </el-text>
                <el-text
                  type="primary"
                  v-if="formData!.yearDescription"
                >{{ formData!.yearDescription }}</el-text>
                <el-text type="primary" v-else>无</el-text>
              </div>
            </el-card>
          </el-col>
          <el-col wrap :span="17" class="description-view">
            <el-row justify="end">
              <el-text type="info">修改日期:&nbsp;</el-text>
              <el-text type="info">{{ formatDate(formData!.createTime) }}</el-text>
            </el-row>
            <div v-html="formData!.description"></div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 子表 图片 -->
      <el-tab-pane label="文玩图片" name="infoImage" class="tab-panel">
        <div
          v-for="(item, index) in imageList"
          :key="index"
          class="maskContainer"
        >
          <div>
            <el-image
              :src="item.imagePath"
              :preview-src-list="[item.imagePath]"
              class="originalImg"
              fit="cover" />
          </div>
          <div class="mask">
            <div
              class="zoomInImg svgBox"
              @click.stop="showImgView(item)"
            >
              <el-icon size="30">
                <ZoomIn />
              </el-icon>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 子表 视频 -->
      <el-tab-pane label="文玩视频" name="infoVideo" class="tab-panel">
        <div
          v-for="(item, index) in videoList"
          :key="index"
        >
          <el-row justify="center">
            <el-text tag="b">{{ item.name }}</el-text>
          </el-row>
          <el-row justify="center" class="video-frame">
            <video
              :src="item.videoPath"
              class="video"
              controls
              width="80%">
            </video>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 子表 360度环绕展示 -->
      <el-tab-pane label="文玩360度环绕展示" name="info360Presentation">
        <iframe
          v-if="subTabsName === 'info360Presentation'"
          class="iframe"
          :src="getPresentationUrl()"
        >
        </iframe>
      </el-tab-pane>
    </el-tabs>

    <!--  图片预览  -->
    <el-dialog v-model="previewVisible" center>
      <template #header="{ titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">{{ previewImgTitle }}</h4>
      </template>
      <el-row class="row-bg">
        <el-image style="max-width: 800px; max-height: 600px;" :src="previewImgUrl" fit="cover"/>
      </el-row>
    </el-dialog>
  </ElDialog>
</template>



<script setup lang="ts">
import {DICT_TYPE} from '@/utils/dict'
import {formatDate} from '@/utils/formatTime'
import {InfoApi} from '@/api/artifact/info'
import {Picture as IconPicture, ZoomIn} from '@element-plus/icons-vue'

/** 文玩信息 表单 */
defineOptions({ name: 'InfoEditForm' })

const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formData = ref({
  id: 0,
  name: "",
  category: 0,
  material: 0,
  weight: 0,
  length: 0,
  width: 0,
  height: 0,
  year: 0,
  yearDescription: "",
  description: "",
  createTime: new Date(),
}) // 表单数据
const formRef = ref() // 表单 Ref

/** 子表的表单 */
const subTabsName = ref('infoMain')
const imageList = ref<any[]>([])
const videoList = ref<any[]>([])

/** 图片预览弹窗 */
const previewImgTitle = ref("")
const previewImgUrl = ref("")
const previewVisible = ref(false)

/** 360环绕展示 */
const artifactId = ref()

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + "detail")
  artifactId.value = id
  resetForm()
  formLoading.value = true
  try {
    formData.value = await InfoApi.getInfo(id)
    imageList.value = await InfoApi.getInfoImageListByArtifactId(id)
    videoList.value = await InfoApi.getInfoVideoListByArtifactId(id)
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  formData!.value = {
    id: 0,
    name: "",
    category: 0,
    material: 0,
    weight: 0,
    length: 0,
    width: 0,
    height: 0,
    year: 0,
    yearDescription: "",
    description: "",
    createTime: new Date(),
  }
  formRef.value?.resetFields()
}

/** 加载文玩索引图像 */
const getThumbnail = () => {
  if (!imageList || !imageList.value || imageList.value.length === 0) {
    return ""
  }
  return imageList.value[0].imagePath
}

const showImgView = (imageObject: any) => {
  previewImgTitle.value = imageObject.name
  previewImgUrl.value = imageObject.imagePath
  previewVisible.value = true
}

const getPresentationUrl = () => {
  const ipAddress = "localhost"
  const port = "801"
  return "http://" + ipAddress + ":" + port + "/" + artifactId.value
}
</script>

<style lang="scss" scoped>
.maskContainer {
  display: inline-block;
  position: relative;
  line-height: 0;
  width: 280px;
  height: 210px;
  margin: 5px;

  .originalImg {
    width: 280px;
    height: 210px;
  }

  &:hover {
    .mask {
      opacity: 1;
    }

    img {
      transform: scale(1.1);
    }
  }

  .mask {
    transition: all 0.5s;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .svgBox {
      height: 30px;
      width: 30px;
      background: rgb(#000, 0.3);
      border-radius: 50%;
      margin: 10px;
      padding: 10px;
      cursor: pointer;
    }

    .zoomInImg {
      color: #fff;
    }
  }
}
</style>

<style lang="scss">
.detail-dialog {
  .el-dialog {
    margin: 0 !important;

    &__header {
      padding: 15px;
      border-bottom: 1px solid var(--el-border-color);
    }

    &__body {
      padding: 15px !important;
    }
  }
}
</style>

<style scoped>
.image-error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.tab-panel {
  min-height: 417px;
}
.iframe {
  border: 0;
  width: 100%;
  height: 417px;
}
.card-name {
  text-align: left;
}
.card-number {
  text-align: right;
}
.description-view {
  max-height: 417px;
  overflow: auto;
}
.video-frame {
  background-color: white;
  margin-bottom: 20px;
}
</style>
